<template>
	<view class="content">
		<view class="info-block">
			<view class="name">
				<view class="title">姓名</view>
				<input type="text" class="mine-name" v-model="form.name" placeholder="请填写您的姓名" maxlength="10" />
			</view>
			<view class="name">
				<view class="title">手机号</view>
				<input type="number" class="mine-name" v-model="form.phone_number" placeholder="请填写您的手机号" maxlength="11"
					disabled="" />
			</view>
			<view class="name">
				<view class="title">身份证号</view>
				<input type="number" class="form-crl" v-model="form.idCard" placeholder="请填写您的身份证号码" maxlength="18" />
			</view>
			<view @click="handleSave" class="btn">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage,
		setStorage
	} from '@/util/auth.js'
	import {
		validate
	} from '@/util/validate.js'
	import {
		idCardValidate
	} from '@/util/idCardValidate';
	import {
		getUserApi,
		saveUser
	} from '@/api/login.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					phone_number: '',
					idCard: ''
				},
				rules: {
					faceUrl: {
						name: '头像',
						required: true,
					},
					name: {
						name: '姓名',
						required: true,
					},
					phone_number: {
						name: '手机号',
						required: true,
						validator: function(value, form, callback) {
							const phoneReg =
								/^((\+|00)86)?((134\d{4})|((13[0-3|5-9]|14[1|5-9]|15[0-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[0-2|5-9])\d{8}))$/;

							if (value.length != 11) {
								callback('请输入正确的手机号');
							} else if (!phoneReg.test(value)) {
								callback('请输入正确的手机号');
							}
							callback();
						}
					},
					idCard: {
						name: '身份证号',
						required: true,
					}
				}
			}
		},
		methods: {
			getDetail() {
				uni.showLoading()
				getUserApi({}).then(res => {
					this.form = res;
				}).catch(() => {
					uni.hideLoading()
				})
			},
			handleSave() {
				if (validate(this.form, this.rules)) {
					const idcard = idCardValidate(this.form.idCard);
					if (!idcard.result) {
						this.showToast('请输入正确身份证号码', () => {});
						return;
					}
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					saveUser({
						//faceUrl: this.form.faceUrl,
						name: this.form.name,
						id_card: this.form.idCard
					}).then((res) => {
						uni.hideLoading()
						this.$store.dispatch('user/getUser')
						this.showToast('保存成功', () => {
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						})
					}).catch(() => {
						uni.hideLoading()
						this.showToast('保存失败');
					})
				}
			}
		},
		onShow() {
			this.getDetail()
		},
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;
		background: #f5f5f5;
		min-height: 100vh;

		.info-block {
			display: flex;
			flex-direction: column;
			background: #fff;
			margin-top: 30rpx;
			height: auto;
			padding: 30rpx;
			border-radius: 20rpx;

			.head-img {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;



				.avatar-wrapper {
					margin-bottom: 30rpx;
					background: none;

					.mine-img {
						align-items: center;
						width: 180rpx;
						height: 180rpx;
						border-radius: 50%;
						background: #F5F5F5;
					}

					&::after {
						border: none;
					}
				}
			}

			.name {
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;
				margin-bottom: 30rpx;
				text-align: center;
				height: 100rpx;


				.title {
					margin-right: 30rpx;
				}

				.mine-name {
					height: 100rpx;
				}
			}

			.btn {
				background-color: #BA1519;
				color: #fff;
				width: 400rpx;
				height: 90rpx;
				border-radius: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				margin: 0 auto;
				margin-top: 30rpx;
			}
		}
	}
</style>